<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text">
<input type="button" value="前面添加">
<input type="button" value="后面添加">
<input type="button" value="关羽前面">
<input type="button" value="关羽后面">
<input type="button" value="删除">
<ul>
<li>刘备 </li>
<li id="d1">关羽</li>
<li>张飞</li>
</ul>
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
  <script type="text/javascript">
  $("input:eq(1)").click(function(){
	  var li=$("<li></li>");
	  li.text($("input:first").val());
	  $("ul").prepend(li);
  });
  $("input:eq(2)").click(function(){
	  var li=$("<li></li>");
	  li.text($("input:first").val());
	  $("ul").prepend(li);
  });
  $("input:eq(3)").click(function(){
	  var li=$("<li></li>");
	  li.text($("input:first").val());
	  $("li:contains('关羽')").before(li);
  });
  $("input:eq(4)").click(function(){
	  var li=$("<li></li>");
	  li.text($("input:first").val());
	  $("li:contains('关羽')").after(li);
  });
  $("input:eq(1)").click(function(){
	  var li=$("<li></li>");
	  li.text($("input:first").val());
	  $("li:contains('关羽')").remove();
  });
  </script>
</body>
</html>